<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="openDetail(row.row.row)"
            >查看</el-button
          >
        </span>
      </template>
      <template v-slot:selectNamelist> 开出口历史 </template>
    </list_controller>
    <!-- 开出口查看详情 -->
    <el-drawer
      v-model="open_detail"
      custom-class="detail"
      close-on-click-modal
      :modal="true"
    >
      <template #header>
        <div class="d_header">
          <div class="title">
            <svg-icon icon-class="biaotitubiao"/>
            <div style="margin: 0 0 0 8px">
              开出口详情({{ form_add.stationCode }}C{{ form_add.controlPort }})
            </div>
          </div>
        </div>
      </template>
      <template #default>
        <div class="port_box">
          <el-form
            class="formBox"
            :model="form_add"
            label-position="top"
          >
            <div class="el-drawer_mash desc_box">
              <el-row :gutter="20">
                <el-col :span="24">
                  <p class="drawer_sub_title">
                    <span class="sub_title_line">开出口基础信息</span>
                  </p>
                </el-col>
                <el-col :span="6">
                  <p>所属分站</p>
                  <p>{{ form_add.stationCode }}</p>
                </el-col>
                <el-col :span="6">
                  <p>控制设备</p>
                  <p>{{ form_add.controlPortTypeName }}</p>
                </el-col>
                <el-col :span="12">
                  <p>安装地点</p>
                  <p>{{ form_add.pointPlaceName }}</p>
                </el-col>
                <el-col :span="12" v-if="form_add.controlPortType != 2">
                  <p>馈电测点</p>
                  <p>
                    {{ form_add.feedPointId }}/{{ form_add.feedSensorName }}/{{
                      form_add.feedPlaceName
                    }}
                  </p>
                </el-col>
                <el-col :span="12">
                  <p>设备地理位置</p>
                  <p
                    v-if="
                      form_add.locationX != null ||
                      form_add.locationY != null ||
                      form_add.locationZ != null
                    "
                  >
                    {{ form_add.locationX }}.{{ form_add.locationY }}.{{
                      form_add.locationZ
                    }}
                  </p>
                  <p v-else>-</p>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { computed, reactive } from "vue";
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import dayjs from "dayjs";
const { proxy } = getCurrentInstance();
const store = usePagesStore();
components: {
  list_controller;
}
let state = reactive({
  tabNameData: "历史开出口",
  options: {
    tableheads: computed(() => table_headers.controlEx),
    queryList: {
      dropdownUrl: "",
      querys: [
        {
          field: "key",
          title: "模糊搜索",
          type: "input",
          binddata: "",
          tip:'请输入开出口编号或者控制设备、地点'
        },
        {
          field: "time",
          title: "时间范围",
          col: 8,
          type: "hisdatetimerange",
          binddata: [
            dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
            dayjs().format("YYYY-MM-DD HH:mm:ss"),
          ],
          typespecial: 2,
          show: false,
        },
      ],
      queryMap: new Map([]),
    },
    dataUrl: "/controlPort/ex",
  },
});
const open_detail = ref(false);
const activeName = ref("2");
const form_add = ref({});

// 打开详情抽屉
const openDetail = (row) => {
  open_detail.value = true;
  form_add.value = row;
};
</script>
<style scoped lang="scss">
::v-deep .port_box{
  .boxone{
    padding: 16px;
    height: 184px;
    background-color: #f0f3fa;
    border-radius:4px ;
  }
  .drawer_sub_title{
    margin: 20px 0 12px 0 !important;
  }
}
// 分站详情
::v-deep .detail {
  width: 912px !important;
  // height: 100%;
  .detail_box {
    width: 100%;
    height: 100%;
    .basic_info {
      padding: 16px;
      height: 285px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .location {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
        color: rgba(62, 70, 79, 1);
      }
      .line {
        height: 1px;
        background-color: rgba(91, 109, 128, 0.3);
      }
      .info_data {
        height: 204px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img_box {
          width: 200px;
          height: 142px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          .name {
            font-weight: 700;
          }
          img {
            width: 51px;
            height: 66px;
          }
        }
        .data_box {
          width: 632px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .data_row {
            display: flex;
          }
          .data_item {
            height: 36px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: rgba(62, 70, 79, 1);
            font-size: 14px;
            .item_title {
              color: rgba(62, 70, 79, 0.6);
            }
          }
        }
      }
      .others {
        height: 275px;
      }
    }
  }
  .footer_btns {
    display: flex;
    justify-content: space-between;
  }
}
.demo-tabs {
  .custom-tabs-label {
    display: flex;
    align-items: center;
  }
  .tabs_box {
    height: 220px;
  }
  .one {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .data_row {
      display: flex;
      justify-content: space-between;
    }
    .data_item {
      width: 154px;
      height: 36px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: rgba(62, 70, 79, 1);
      font-size: 14px;
      .item_title {
        color: rgba(62, 70, 79, 0.6);
      }
    }
  }
  .two {
    display: flex;
    justify-content: space-between;
    .items {
      font-size: 14px;
      color: rgba(62, 70, 79, 0.8);
    }
  }
  .three {
    height: 300px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    .three_header {
      display: flex;
      justify-content: space-between;
      color: rgba(62, 70, 79, 0.8);
      font-size: 14px;
      .header_item {
        display: flex;
        align-items: center;
      }
      .btns {
        width: 140px;
        display: flex;
        justify-content: space-between;
      }
    }
    .table {
      margin-top: 12px;
    }
  }
}
</style>
